<template>
  <div class="play-list">
    <slot name="top"></slot>
    <song-list :list='list' :listBtn='listBtn' @selectItem='changeSong' @clickBtn='clickBtn'>
      <div slot="rank" class="rank" slot-scope="{song, index}">
        <i class="iconfont icon-laba rank__icon" v-if="getCurrentIcon(song)" :class="getCurrentIcon(song)"/>
        <span v-else class="rank__icon">{{ index + 1 }}</span>
      </div>
      <div slot="btn">
        <i class="iconfont" :class="iconCls"/>
      </div>
    </song-list>
  </div>
</template>

<script>
import SongList from 'base/song-list'
import { mapActions, mapGetters, mapMutations } from 'vuex'
import _ from 'lodash'

export default {
  components: {
    SongList
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    icon: {
      type: String,
      default: 'icon-ziyuan'
    },
    listBtn: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    iconCls() {
      return this.icon
    },
    ...mapGetters('player', ['currentSong'])
  },
  methods: {
    getCurrentIcon(item) {
      if (this.currentSong && this.currentSong.id === item.id) {
        return 'active'
      }
      return null
    },
    changeSong(song, index) {
      if (this.currentSong && this.currentSong.id === song.id) {
        this.setFullScreen(true)
        return        
      }

      this.play({
        index,
        list: _.cloneDeep(this.list),
        song
      })
    },
    clickBtn(song, index) {
      this.$emit('clickBtn', song, index)
    },
    ...mapActions('player', ['play']),
    ...mapMutations('player', { setFullScreen: 'SET_FULL_SCREEN' })
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';
@import '~@/style/mixins.less';
.play-list{
  .rank{
    flex: auto;
    display: flex;
  }
  .rank__icon {
    display: block;
    width: 100%;
  }
  .active{
    color: @primary-color;
  }
}
</style>
